<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery/jquery-3.4.1.js"></script>
</head>
<body>

<div id="di1">
    nihao
</div>
<button id="test1" onclick="test(1)">1</button>
<button id="test2" onclick="test(2)">2</button>
<button id="test3" onclick="test1(1,2)">2</button>
<script>
    function test(info) {
        if (info == 1) {
            $('#di1').html(123)
        }else if (info == 2) {
            $('#di1').html(456)

        }

    }
    function test1(info1,info2) {
        alert(info1)
        alert(info2)
    }
</script>



<div id="div1">
    <p>欢迎使用 wangEditor 富文本编辑器</p>
</div>

<textarea id="text1" style="width:100%; height:100%;display: none;" ></textarea>

<button id="btn1">获取html</button>
<button id="btn2">获取text</button>


<script type="text/javascript" src="../jquery/jquery-3.4.1.js"></script>
<script type="text/javascript" src="wangEditor.js"></script>
<script type="text/javascript">
    var E = window.wangEditor
    var editor = new E('#div1')
    var $text1 = $('#text1')
    editor.customConfig.onchange = function (html) {
        // 监控变化，同步更新到 textarea
        $text1.val(html)
    }
    //开启debug模式
    editor.customConfig.debug = true;
    // 关闭粘贴内容中的样式
    editor.customConfig.pasteFilterStyle = false
    // 忽略粘贴内容中的图片
    editor.customConfig.pasteIgnoreImg = true
    // 上传图片到服务器
    editor.customConfig.uploadFileName = 'photo'; //设置文件上传的参数名称
    editor.customConfig.uploadImgServer = '/forum/post/upload'; //设置上传文件的服务器路径
    editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024; // 将图片大小限制为 3M
    //自定义上传图片事件
    editor.customConfig.uploadImgHooks = {
        before : function(xhr, editor, files) {

        },
        success : function(xhr, editor, result) {
            console.log("上传成功");
        },
        fail : function(xhr, editor, result) {
            console.log("上传失败,原因是"+result);
        },
        error : function(xhr, editor) {
            console.log("上传出错");
        },
        timeout : function(xhr, editor) {
            console.log("上传超时");
        }
    }


    editor.create()
    let eds = document.getElementsByClassName('w-e-text-container')
    eds[0].style = eds[0].style.cssText + 'height: 500px'
    $text1.val(editor.txt.html())

    document.getElementById('btn1').addEventListener('click', function () {
        // 读取 html
        alert(editor.txt.html())
        console.log(editor.txt.html())
    }, false)

    document.getElementById('btn2').addEventListener('click', function () {
        // 读取 text
        alert(editor.txt.text())
        var txt = editor.txt.text()
        alert(txt.length)
        if (txt.length == 0){
            alert("帖子详情不能为空");
            return false;
        } else {
            if (txt.length > 100){
                // 截取其中的部分内容
                var txt = txt.substr(0,100);
                console.log(txt);
            }else {
                var txt = txt;
            }
        }
        console.log(txt)
    }, false)
</script>
</body>
</html>